Clutter (toolkit)

Clutter is an open source graphics library for creating hardware-accelerated user interfaces. It relies upon OpenGL (1.4+) or OpenGL ES (1.1 or 2.0) for rendering, can be compiled on different platforms (X11, Darwin and Win32) and has multiple bindings to other languages (including Mono, Perl, Python, Ruby and Vala). It also supports media playback using GStreamer and 2D graphics rendering using Cairo.^[2]

Clutter was created by OpenedHand Ltd, now part of Intel. Licensed under the LGPL v2.1, Clutter is free and open source software.^[3]

Programming languages

Clutter is implemented using the C programming language with a design based on the GObject object system. Bindings are available for these languages:

• C++ (cluttermm)
• Perl (clutter-perl)
• Ruby (rbclutter)
• Python (PyClutter)
• Vala (clutter-vala)
• C# (clutter-sharp (aka Clutter#))
• JavaScript (Seed and GJS)
• Haskell (clutterhs)

Platforms

Clutter is developed on the X Window System, using the GLX extension^[4]. It is also targeted to embedded environments, either using X or the native frame buffer. As of release 0.6, native support for Mac OS X has been added^[5]. A native Microsoft Windows backend is supported since the 0.8 release^[6]. Windows pre-compiled dll's can be found on ^[7] or ^[8], however, you can build the latest dll for Windows with MinGW and Bash shell for Windows.

Design

Clutter is a scene graph based canvas working in retained mode. Every object on the scene is usually a 2D surface inside a 3D space.

Clutter abstracts the native windowing environment behind a backend, which is also responsible for creating the main container for the scene graph; this top level container is called the stage. Items on the stage are called actors.

Instead of operating on matrices, as does OpenGL, the Clutter developer changes properties of each actor. Clutter will then notice the changes, and render the scene accordingly.

Example

This example will add a label on the stage.

ClutterActor *stage = clutter_stage_get_default ();

This statement will retrieve the default stage, which will contain all the actors on the scene.

ClutterActor *label = clutter_text_new_with_text ("Sans 32px", "Hello, world");
clutter_container_add_actor (CLUTTER_CONTAINER (stage), label);

These statements will create a new label, using the Sans font 32 pixels high, and with the "Hello, world" text, and will place it into the stage.

float x, y;
 
x = (clutter_actor_get_width (stage) - clutter_actor_get_width (label)) / 2;
y = (clutter_actor_get_height (stage) - clutter_actor_get_height (label)) / 2;
clutter_actor_set_position (label, x, y);

These statements will position the label at the center of the stage, taking into account the stage and the label size.

clutter_actor_show (stage);

These statements will show the stage. All actors in Clutter are visible unless explicitly hidden, except for the stage; thus showing the stage will automatically display all of its visible children.

Animation

Clutter allows implicit animations of every item on the canvas using special objects called behaviours: each behaviour can be applied to multiple actors, and multiple behaviours can be composed on the same actor. Behaviours handle animations implicitly: the developer specifies the initial and final states, the time (or number of frames) needed to complete the animation, the function of time to be used (linear, sine wave, exponential, etc.), and the behaviour will take care of the tweening. Clutter provides a generic base class for developers to implement custom behaviours, and various simple classes handling simple properties, like opacity, position on the Z axis (depth), position along a path, rotation, etc.

Since Clutter 1.0, it is also possible to create simple, one-off animations using the ClutterAnimation class and the clutter_actor_animate() convenience function. The clutter_actor_animate() function animates an actor properties between their current state and the specified final state.

Example

This example will scale the label from its size to a factor of 2 in 2 seconds, using a linear function of time and behaviours:

ClutterTimeline *timeline = clutter_timeline_new (2000);
ClutterAlpha *alpha = clutter_alpha_new_full (timeline, CLUTTER_LINEAR);
ClutterBehaviour *behaviour = clutter_behaviour_scale_new (alpha,
                                                           1.0, 1.0, /* initial scaling factors */
                                                           2.0, 2.0  /* final scaling factors */ );
clutter_behaviour_apply (behaviour, label);

These statements will create a Timeline with a duration of 2000 milliseconds; an Alpha, binding the Timeline to a linear easing mode; a Behaviour, which will scale any actor to which it is applied between factor 1.0 and factor 2.0 (both horizontally and vertically). Finally, it applies the behaviour to an actor.

The equivalent code using the implicit animations API is:

clutter_actor_animate (label,          /* the actor to animate */
                       CLUTTER_LINEAR, /* the easing mode */
                       2000,           /* the duration of the animation */
                       "scale-x", 2.0, /* final horizontal scaling factor */
                       "scale-y", 2.0, /* final vertical scaling factor */
                       NULL);

This statement will create an implicit ClutterAnimation^[9] object, which will animate the provided GObject properties between their current value and the specified final value.

Interface builder

Clutter can build user interfaces using a specialized JSON dialect^[10]. The entire scene graph is defined using JSON types and built at run time through the ClutterScript class.

Example

This definition will create the main window and place a label with the text Hello, world! inside it.

{
  "id" : "main-stage",
  "type" : "ClutterStage",
  "color" : "white",
  "width" : 800,
  "height" : 600,
  "title" : "Script demo",
  "children" : [
    {
      "id" : "hello-label",
      "type" : "ClutterText",
      "x" : 400,
      "y" : 300,
      "text" : "Hello, world!",
      "color" : "black",
      "font-name" : "Sans 48px"
    }
  ],
  "signals" : [
    { "name" : "destroy", "handler" : "clutter_main_quit" }
  ]
}

The definition can be saved into a file or as a string, and loaded using:

ClutterScript *script = clutter_script_new ();
GError *error = NULL;
clutter_script_load_from_data (script, description, -1, &error);
if (error)
  {
    g_warning ("Unable to load UI description: %s", error->message);
    g_error_free (error);
  }
else
  {
    GObject *stage;
 
    clutter_script_connect_signals (script, NULL); /* connect the signal handlers */
    stage = clutter_script_get_object (script, "main-stage"); /* get the "main-stage" object */
    clutter_actor_show (CLUTTER_ACTOR (stage));
  }

Integration libraries

Clutter can be integrated with other libraries and toolkits, for instance:

• GTK+ applications can embed Clutter stages using a special widget.
• Clutter applications can embed GTK+ widgets using the 'client-side windows' feature since GTK+ 2.18.^[11]
• Clutter applications can use GStreamer to play videos directly into a Clutter texture actor.
• Clutter applications can use Cairo to draw onto a texture.

See also

• List of widget toolkits
• Core Animation
• Windows Presentation Foundation
• Qt (framework)

References

External links

• Clutter homepage
• Clutter project blog